<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>01-vue的基本使用</title>
	<!-- 导包 -->
	<script src="../vue@3.2.23.js"></script>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		.color1{
			width: 50px;
			height: 50px;
			background-color: aqua;
		}
		.color2{
			width: 50px;
			height: 50px;
			background-color: wheat;
		}
	</style>
</head>
<body>
	<!-- 模板 -->
	<div id="app">
		{{goods}}
		{{val1}}
		{{val2}}
		<div class="color1" v-if="isShow">
			color1
		</div>
		<div class="color2" v-for="item in list" v-if="isShow">
			{{item}}
		</div>
		<button @click="update()">更改</button>
		<button @click="unmount()">卸载</button>
	</div>
</body>
</html>
<script type="text/javascript">
	// vue：面对数据编程
	// 生命周期函数：在生命周期内某个时间节点要执行的方法
	const {createApp,ref} = Vue;
	// 创建一个app应用程序 application
	const app = createApp({
		// vue管理的数据
		data(){
			return {
				goods:'这是一条商品数据',
				val1:1,
				val2:2,
				isShow:true,
				list:[11,22,33,44]
			}
		},
		// 方法
		methods:{
			sum(){
				return this.val1 + this.val2;
			},
			update(){
				this.goods = '这是一件展品';
			},
			unmount(){
				// vm.unmount("#app");
				console.log('卸载模块');
				unmount();
			}
		},
		// 1.创建App实例之前要执行的函数
		beforeCreate() {
			console.log('beforeCreate被执行',1);
		},
		// 2.创建App实例之后要执行的函数
		created() {
			console.log('created被执行',2);
		},
		// 3.在模板挂载之前要执行的函数
		beforeMount() {
			console.log('beforeMount被执行',3);
		},
		// 4.在模板挂载之后要执行的函数
		mounted() {
			console.log('mounted被执行',4);
		},
		// 5.数据被修改之前要执行的函数
		beforeUpdate() {
			console.log('beforeUpdate被执行',5);
		},
		// 6.数据被修改之后要执行的函数
		updated() {
			console.log('updated被执行',6);
		},
		// 7.卸载模板之前要执行的函数
		beforeUnmount() {
			console.log('beforeUnmount被执行',7);
		},
		// 8.卸载模板之后要执行的函数
		unmounted() {
			console.log('unmounted被执行',8);
		}
		
	})
	// mvvm的思维模型，m：model数据，v：view视图，vm：viewModel视图数据连接层
	const vm = app.mount("#app");
	
	function unmount(){
		app.unmount();
	}
</script>